<template>
    <div>
        <div style="text-align: left; padding-left: 150px; padding-top: 50px; font-size: 14px;">
            发货单号：<span style="font-size: 20px; font-weight: 700;">{{bill_id}}</span>
            <el-button size="small" type="success" @click="port">导出为excel表格</el-button>
            <template>
                <div id='temp_box' style="display: flex; height: auto;">
                    
                </div>
            </template>
        </div>
         <el-card class="box-css1">
           <ve-line :data="chartData" style="width:600px;height:400px;"></ve-line>
        </el-card>
    </div>
</template>
<script>    
    import {get_temps} from '../api/api'

    export default{
        data(){
            return {
              tables:[],
               bill_id:'',
               temps: [],
               id:'',
               chartData: {
                    columns: ['time', 'temp'],
                    rows: [
                    
                    ]
                 }
            }
        },
        methods: {
            export2Excel(){
      require.ensure([],()=>{
        const {export_json_to_excel } = require('../lib/Export2Excel.js')
        const tHeader = ['时间','温度']   //自定义列名
        const filterVal = ['time','temp']   //对应自怼
        const list = this.tables   //table数据
        const data = this.formatJson(filterVal,list);
        export_json_to_excel(tHeader,data,'列表excel');  //导出文件名称
      })
    },
    formatJson(filterVal,jsonData){
      console.info(jsonData)
      return jsonData.map(v => filterVal.map(j=> v[j]))
    },
            port(){
                this.export2Excel()
            },
            gettemps:function(){
                var params={'id':this.id}
                get_temps(params).then(res=>{
                    if(res.code==200)
                    {
                        // console.log(res.data)
                        this.temps = res.data
                        this.bill_id=res.bill_id
                        this.chartData['rows']=res.tlist
                        this.tables=res.tlist

                        // $('#temp_box').append('<p style="color: red">111</p>')
                        var columnNums = Math.ceil(this.temps.length/4)
                        console.log(columnNums)
                        var content = ""
                        console.log(this.temps)
                        var j = 0
                        
                        for(var i=0; i<this.temps.length; i++){
                            // console.log(i)
                            if(j === 0){
                                content += '<dl><dt>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Date&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;℃</dt>'
                                i--    
                            }else{
                                if(this.temps[i].isalarm==1){
                                    content += '<dd style="color:red">'+this.temps[i].time+"&nbsp;&nbsp;"+this.temps[i].temp+'</dd>'
                                }else{
                                    content += '<dd>'+this.temps[i].time+"&nbsp;&nbsp;"+this.temps[i].temp+'</dd>'
                                }
                                
                            }
                            j++;
                            if(j===columnNums || i===this.temps.length){
                                content += '</dl>'
                                $('#temp_box').append(content)
                                content = ""
                                j = 0
                            }
                        }



                    }
                    else {
                        this.$message('没有温度记录');
                        this.bill_id=res.bill_id
                    }
                    
                })
            }
        },
        mounted(){
           this.id = this.$route.params.value
            this.gettemps()

            
        },
    }
</script>


<style>
 .box-css1{
      width:1100px;
      height:400px;
       background:#e6e9ee;
        margin-top:100px;
        margin-left:80px;

    }
</style>
